<nz-spin [nzSpinning]="loading" [nzDelay]="500">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="projectName">项目名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="项目名不能为空且长度小于20">
        <input nz-input formControlName="projectName" id="projectName"/>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="enable">是否可用</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select [formControlName]="'enable'">
          <nz-option nzValue="1" nzLabel="是"></nz-option>
          <nz-option nzValue="2" nzLabel="否"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="remark">备注</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="'备注不能大于'+remarkMaxLength+'字符'">
        <nz-textarea-count [nzMaxCharacterCount]="remarkMaxLength">
          <textarea rows="4" formControlName="remark" nz-input></textarea>
        </nz-textarea-count>
      </nz-form-control>
    </nz-form-item>
    <nz-row [nzJustify]="'center'" *ngIf="!!pid" class="tag-row">
      <nz-tag class="editable-tag" [nzColor]="'#108ee9'" *ngFor="let u of hadUsers" nz-popconfirm
              [nzPopconfirmTitle]="'Are you sure delete this user:'+u.userName+' ?'"
              (nzOnConfirm)="deleteUser(u.userId)">
        <i nz-icon nzType="tag" nzTheme="outline"></i>
        {{u.userName}}
      </nz-tag>
      <nz-tag class="editable-tag" (click)="isVisible=true">
        <i nz-icon nzType="plus"></i>
        添加项目管理人
      </nz-tag>
    </nz-row>
    <nz-form-item nz-row class="register-area">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary" [disabled]="!validateForm.valid || loading">保存</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-spin>

<nz-modal [(nzVisible)]="isVisible" nzTitle="选择项目经理" nzCentered (nzOnCancel)="isVisible = false" (nzOnOk)="handleOk()"
>
  <ng-container *nzModalContent>
    <div class="filter-div">
      <nz-input-group nzAddOnBefore="filter">
        <input type="text" nz-input [(ngModel)]="filter"/>
      </nz-input-group>
    </div>
    <nz-table class="user-table" #basicTable [nzData]="computedUsers" [nzShowPagination]="false"
              [nzFrontPagination]="false"
              [nzScroll]="{y:'500px'}">
      <tbody>
      <tr *ngFor="let data of basicTable.data" (click)="clickRow(data)"
          [ngClass]="{'selected-user':isSelected(data.userId)}">
        <td>{{data.userName}}</td>
        <td>{{data.userAccount}}</td>
      </tr>
      </tbody>
    </nz-table>
  </ng-container>

</nz-modal>
